<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-info">
        <p class="title">《织码考试》AI智能考试系统</p>
        <p class="info">1. 一个AI智能在线考试系统，利用AI辅助智能出卷、自动阅卷等等。</p>
        <p class="info">2. 支持多种模型：DeepSeek、通义、混元、盘古、智普、星火、月之暗面等等。</p>
        <p class="info">3. 支持多种题型：单选题、多选题、判断题、填空题、简答题等等。</p>
        <p class="info">4. 支持多种格式：文字、图片、公式、音频、视频等等。</p>
      </div>
      <div class="login-panel">
        <el-form v-loading="loading" :model="loginForm" label-position="left" @keyup.enter="handleLogin()">
          <h1 class="login-head">管理端登录</h1>
          <el-form-item class="form-group" prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="用户名"/>
          </el-form-item>
          <el-form-item class="form-group" prop="mobilePwd">
            <el-input v-model="loginForm.mobilePwd" placeholder="密码" type="password" show-password/>
          </el-form-item>
          <el-form-item class="form-group" prop="verCode">
            <el-input v-model="loginForm.verCode" class="var-input" placeholder="验证码"/>
            <el-image class="var-img" :src="verImg" @click="getCaptcha"/>
          </el-form-item>
          <el-button class="login-button" type="primary" @click="handleLogin">登 录</el-button>
          <div class="contact_info">
            <div class="tips">咨询商业版/体验账号 ➔ 扫码加微信解答</div>
            <div><img src="@/assets/images/qr_code.png" alt="公众号二维码"/></div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div v-if="website.websiteCopyright" class="copyright">
        <span v-html="website.websiteCopyright"/>
      </div>
      <div class="website">
        <a v-if="website.websiteIcp" href="https://beian.miit.gov.cn/" target="_blank">{{ website.websiteIcp }}</a>
        <span v-if="website.websiteIcp && website.websitePrn">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img v-if="website.websitePrn" :alt="website.websitePrn" src="@/assets/images/common/beian.png"/>
        <a v-if="website.websitePrn"
           :href="'https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + website.websitePrnNo"
           target="_blank">&nbsp;{{ website.websitePrn }} </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {loginApi} from '@/api/login'
import {onMounted, reactive, ref} from 'vue'
import {setToken} from '@/utils/cookie'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/store/modules/user'
import {createNewRouter} from '@/router'
import {PATH} from '@/utils/constants.js'
import {ElMessage} from 'element-plus'
import {encrypt} from '@/utils/base.js'

const router = useRouter()
const loading = ref(false)
const verImg = ref()

// 站点信息
const website = ref({})
onMounted(() => {
  loginApi.getWebsite().then((res) => {
    website.value = res
  })
  // 验证码
  getCaptcha()
})

// 登录
const loginForm = reactive({
  mobile: '',
  mobilePwd: ''
})

// 获取验证码
async function getCaptcha() {
  try {
    const res = await loginApi.getCodeImg()
    loginForm.verToken = res.verToken
    verImg.value = res.img
  } catch (error) {
    console.error(error)
  }
}

async function handleLogin() {
  if (!loginForm.verCode) {
    ElMessage.error('请输入验证码')
    return
  }

  loading.value = true
  try {
    // 密码加密
    loginForm.mobilePwdEncrypt = encrypt(loginForm.mobilePwd, website.value.rsaLoginPublicKey)
    delete loginForm.mobilePwd
    const res = await loginApi.login(loginForm)
    // 存入cookie
    setToken(res.token)
    // 更新store
    useUserStore().login(res)
    // 初始化路由
    createNewRouter(res.routerList)
    await router.push(PATH.URL_DASHBOARD)
  } catch (error) {
    console.error(error)
    await getCaptcha()
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.login-content {
  z-index: 10;
  position: absolute;
  top: calc((100vh - 500px) / 2);
  left: 0;
  right: 0;
  width: 800px;
  margin: 0 auto;
  height: 400px;

  .login-info {
    float: left;
    width: 350px;
    height: 100%;
    padding: 20px 25px;
    background: var(--el-color-primary-dark-2);
    color: #fff;
    border-radius: 10px 0 0 10px;

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .info {
      font-size: 16px;
      font-weight: 300;
      line-height: 32px;
    }
  }

  .login-panel {
    float: right;
    background: #fff;
    width: 350px;
    height: 100%;
    padding: 20px 25px;
    border-radius: 0 10px 10px 0;

    .login-head {
      text-align: center;
      font-size: 24px;
      color: var(--el-color-primary);
    }

    .login-button {
      width: 350px;
      height: 45px;
      font-size: 16px;
      margin-top: 20px;
    }

    .contact_info {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 8px;
      overflow: hidden;

      > :last-child {
        width: 130px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      > :not(:last-child) {
        margin-right: 20px;
      }
    }
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  padding-bottom: 20px;
  font-size: 13px;
  line-height: 25px;

  a {
    text-decoration: none;
    color: #fff;
  }

  .website {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.var-input {
  width: 200px;
}

.var-img {
  margin-left: 20px;
  width: 80px;
  height: auto;
}

.el-input {
  height: 40px;
}
</style>
